<template>
    <div class="container">
        <div>
          <!-- @click="$pt.navigateTo({url:'/pages/personal/customer-manage/detail/main?id=' + resData.customerMemberId  + '&name=' + resData.customerNickname})" -->
            <div class="row-bar mar-t-10 flex flex-between">
                <div class="headshop-box">
                    <img class="width-50 height-50" v-if="resData.customerAvatar" :src="resData.customerAvatar" alt="">
                </div>
                <div class="width-280 flex flex-between">
                    <div>
                        <div class="font-13 font-color-9">昵称：<span class="font-color">{{resData.customerNickname}}</span></div>
                        <div class="font-13 font-color-9">电话：<span class="font-color">{{resData.customerPhone}}</span></div>
                    </div>
                    <!-- <div>
                        <img class="width-5 height-10" v-if="fileSpace" :src="fileSpace + '/images/arrow-right.png'" alt="">
                    </div> -->
                </div>
            </div>
            <div class="order-content pad-l-15 pad-r-15 mar-t-10">
                <div class="order-row flex flex-between"  v-for="(item,index) in resData.orderGoodsList" :key="index">
                    <div class="img-box">
                        <img v-if="item.goodsImageUrl" :src="item.goodsImageUrl" alt="" class="width-90 height-90">
                    </div>
                    <div class="width-240 shop-content height-90">
                        <div class="line-2 font-14 font-color">
                            {{item.goodsTitle}}
                        </div>
                        <div class="line-1 font-color-9 select-content font-12">{{item.skuDetail}}</div>
                        <div class="flex flex-between font-color">
                            <span class="font-14">￥{{item.goodsPrice}}</span>
                            <span class="font-11">×{{item.goodsNum}}件</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="total-content mar-t-10">
                <div class="total-title font-14 flex flex-between">
                    <div class="font-color">商品小计</div>
                    <div class="font-color-9" v-if="orderType !== '10'">￥{{resData.orderGoodsAmount}}</div>
                    <div class="font-color-9" v-if="orderType === '10'">￥{{resData.goodsTotalPrice}}</div>
                </div>
                <div class="total-row font-14 flex flex-between">
                    <div class="font-color">订单总计</div>
                    <div class="font-red">￥{{resData.orderPrice}}</div>
                </div>
            </div>
            <div class="order-details font-13 font-color-9 mar-t-5">
                <div class="pad-t-10"><span>订单编号：</span><span>{{resData.orderNo}}</span></div>
                <div class="pad-t-10"><span>下单时间：</span><span>{{resData.createTime}}</span></div>
                <div class="pad-t-10"><span>支付时间：</span><span>{{resData.payTime}}</span></div>
                <div class="pad-t-10">
                    <span>订单状态：</span>
                    <span class="font-red" v-if="resData.orderStatus === 1">待核销</span>
                    <span class="font-red" v-if="resData.orderStatus === 2">待提货</span>
                    <span class="font-green" v-else-if="resData.orderStatus === 3">已核销</span>
                    <span class="font-green" v-else-if="resData.orderStatus === 4">已完成</span>
                </div>
            </div>
            <div class="btn-box" v-if="!finish">
                <!-- <button class="confirm-btn" v-if="statusIs" @click="$pt.navigateTo({url:'/pages/personal/cancellation-desk/success-cancellation/main'})">确定核销</button> -->
                <button class="confirm-btn" @click="confirm_canlletation">确定核销</button>
            </div>
        </div>
    </div>
</template>
<script>
import { getProjectOrder } from '@/api/distribution'
import { getOrder } from '@/api/shop/'
import { doOrderAcquisition } from '@/api/personal'
export default {
  data() {
    return {
      orderId: 0,
      resData: {},
      finish: false,
      memberStore: {},
      queryData: {
        orderId: null,
        memberId: null
      },
      orderType: ''
    }
  },
  onShow() {
    this.queryData.orderId = this.getCurrentPage().query.orderId
    this.queryData.memberId = this.getCustomerId // 有问题，先不改
    this.orderType = this.getCurrentPage().query.orderType
    console.log(this.getCurrentPage().query)
    this.getOrderDetails()
  },
  methods: {
    getOrderDetails() {
      if (this.orderType === '10') {
        getOrder(this.queryData.orderId).then((response) => {
          if (response.isError) return
          if (response.data.orderStatus === 1) {
            this.finish = false
          } else if (response.data.orderStatus === 3 || response.data.orderStatus === 4) {
            this.finish = true
          }
          this.resData = response.data
          this.memberStore = response.data.memberStore
        }).catch(() => {
        })
      } else {
        getProjectOrder(this.queryData.orderId).then((response) => {
          if (response.isError) return
          if (response.data.orderStatus === 1) {
            this.finish = false
          } else if (response.data.orderStatus === 3 || response.data.orderStatus === 4) {
            this.finish = true
          }
          this.resData = response.data
          this.memberStore = response.data.memberStore
        }).catch(() => {
        })
      }
    },
    confirm_canlletation() {
      doOrderAcquisition(this.queryData).then((response) => {
        if (response.isError) return
        this.$pt.redirectTo({url: '/pages/home/store-cancellation/success-cancellation/main?orderId=' + this.queryData.orderId})
      }).catch(() => {
      })
    }
  }
}
</script>
<style lang="less" scoped>
.row-bar{
    background: white;
    padding: 15px;
    .headshop-box{
        img{
            border-radius: 50%;
        }
    }
}
.order-content{
    background: white;
    .order-row{
        border-bottom: 1px solid #ededed;
        padding: 15px 0;
        .img-box{
            // background: yellow;
        }
        .shop-content{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .select-content{
            background: #f2f2f2;
            padding-left: 5px;
            margin: 5px 0;
        }
    }
    .line-1, .line-2 {
        line-height: unset;
        height: unset;
    }
    
}
.total-content{
    background: white;
    padding: 5px 15px;
    .total-title{
        border-bottom: 1px solid #ededed;
        padding: 7px 0;
    }
    .total-row{
        padding: 13px 0;
    }
}
.order-details{
    background: white;
    padding: 10px 15px 70px;
}
.btn-box{
    position: fixed;
    left: 0;
    bottom: 10px;
    width: 100%;
    .confirm-btn{
        color: white;
        background: #ff0000;
        font-size: 15px;
        width: calc(100% -30px);
        border-radius: 3px;
        margin: 0 15px;
        &::after{
            border: unset;
        }
    }
}
</style>
